<template>
  <div class="page-container-padding">
    <!-- 产业服务案例评级 -->
    <div style="display: flex; align-items: center">
      <el-date-picker
        v-model="currentDate"
        value-format="yyyyMMdd"
        size="mini"
        placeholder="指定创建日期查询"
        :clearable="true"
      ></el-date-picker>
      <el-select v-model="isLevel" size="mini" style="margin-left: 6px">
        <el-option :value="0" label="未评级" />
        <el-option :value="1" label="已评级" />
      </el-select>
      <el-button
        size="mini"
        type="primary"
        style="margin-left: 6px"
        @click="queryRecords"
      >
        查询
      </el-button>
      <el-pagination
        style="margin-left: 20px"
        background
        hide-on-single-page
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <div class="container">
      <div v-for="item in recordList" :key="item.id" class="record-item">
        <el-card style="padding: 4px 10px">
          <div>
            <span class="company-name">{{ item.company_name }}</span>
            <span>{{ item.start_date }} ~ {{ item.end_date }}</span>
            <span class="level-box">
              <span>评级：</span>
              <el-select v-model="item.level_flag" size="mini">
                <el-option value="A" label="A"></el-option>
                <el-option value="B" label="B"></el-option>
                <el-option value="C" label="C"></el-option>
                <el-option value="D" label="D"></el-option>
                <el-option value="E" label="E"></el-option>
              </el-select>
              <el-button
                size="mini"
                type="primary"
                style="margin-left: 6px"
                :loading="item.levelLoading"
                @click="toSaveLevel(item)"
              >
                保存
              </el-button>
            </span>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">所属区域：</el-col>
              <el-col :span="6">{{ item.company_locate }}</el-col>
            </el-row>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">所属行业：</el-col>
              <el-col :span="6">{{ item.company_area }}</el-col>
              <el-col :span="14">
                <span class="note">{{ item.company_area_note }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">服务对象类型：</el-col>
              <el-col :span="6">{{ item.company_type }}</el-col>
              <el-col :span="14">
                <span class="note">{{ item.company_type_note }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">企业参与形式：</el-col>
              <el-col :span="6">{{ item.service_model }}</el-col>
              <el-col :span="14">
                <span class="note">{{ item.service_model_note }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">涉及品种：</el-col>
              <el-col :span="20">{{ item.varieties }}</el-col>
            </el-row>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">案例摘要：</el-col>
              <el-col :span="20">{{ item.summary }}</el-col>
            </el-row>
          </div>
          <div class="content-row">
            <el-row :gutter="22">
              <el-col :span="4">案例附件：</el-col>
              <el-col :span="20">
                <a target="_blank" :href="item.annex_url">{{ item.annex }}</a>
              </el-col>
            </el-row>
          </div>
          <div class="pub-info">
            <span>{{ item.admin_name }} 创建于{{ item.create_time }}</span>
          </div>
        </el-card>
      </div>
    </div>
    <div style="margin-top: 16px">
      <!-- 页码 -->
      <el-pagination
        style="margin-left: 20px"
        background
        hide-on-single-page
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    GetLevelIndustrialService,
    LevelIndustrialService,
  } from '@/api/departmentWork/industrialService'
  export default {
    data() {
      return {
        currentDate: null,
        isLevel: 0,
        page: 1,
        pageSize: 4,
        totalCount: 0,
        recordList: [],
      }
    },
    mounted() {
      this.queryRecords()
    },
    methods: {
      queryRecords() {
        let queryDate = null
        if (this.currentDate) {
          queryDate = this.currentDate
        }
        GetLevelIndustrialService(
          queryDate,
          this.isLevel,
          this.page,
          this.pageSize
        ).then((res) => {
          // console.log(res)
          const data = res.data
          this.recordList = data.data.map((ele) => {
            ele.levelLoading = false
            return ele
          })
          this.totalCount = data.total_count
        })
      },

      // 页码改变
      currentPageChanged(page) {
        this.page = page
        this.queryRecords()
      },

      // 保存评级
      toSaveLevel(row) {
        if (!row.level_flag) {
          this.$baseMessage('请选择等级再操作!', 'error')
          return
        }
        row.levelLoading = true
        LevelIndustrialService({
          rid: row.id,
          level_flag: row.level_flag,
        }).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          row.levelLoading = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .container {
    display: flex;
    align-items: top;
    margin-top: 16px;
    flex-wrap: wrap;
    .record-item {
      width: calc(50% - 32px);
      margin-right: 16px;
      margin-bottom: 16px;
      &:hover {
        .action-btn {
          opacity: 1;
        }
      }
      .level-box {
        float: right;
        font-size: 14px;
        font-weight: normal;
      }
      .company-name {
        font-weight: 700;
        font-size: 18px;
        margin-right: 16px;
      }
      .action-btn {
        font-size: 11px;
        float: right;
        color: #ff4f39;
        cursor: pointer;
        opacity: 0;
      }
      .pub-info {
        margin-top: 5px;
        font-size: 11px;
        color: #999;
        text-align: right;
      }
      .content-row {
        margin-top: 10px;
        line-height: 22px;
        .note {
          color: #888;
          font-size: 12px;
        }
      }
    }
  }
</style>
